<template>
  <el-dialog
    :visible="dialogOpenReportVisible"
    :close-on-click-modal="false"
    @close="closeDialog"
    :append-to-body="true"
    width="760px"
  >
    <!-- 对话框头部 -->
    <div
      slot="title"
      class="header-title"
      style="background-color: #409eff; color: #fff"
    >
      <div style="padding: 15px 20px">{{ dialogHeaderName }}</div>
    </div>

    <!-- 学生信息 -->
    <span
      >学生姓名：<i>{{ messages.student }}</i></span
    >
    <span
      >学号：<i>{{ messages.studentId }}</i></span
    >
    <span
      >专业：<i>{{ messages.major }}</i></span
    >
    <span
      >课题名称：<i>{{ messages.topicName }}</i></span
    >

    <!-- 开题报告信息 -->
    <el-form :model="reportData">
      <el-form-item
        label="选题的依据、意义、国内外现状及主要参考文献："
        label-width="200px"
        prop="views"
      >
        <el-input
          type="textarea"
          rows="8"
          v-model="reportData.views"
          autocomplete="off"
          style="width: 480px"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="研究内容："
        label-width="200px"
        prop="researchContent"
      >
        <el-input
          type="textarea"
          rows="8"
          v-model="reportData.researchContent"
          autocomplete="off"
          style="width: 480px"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="研究方法、手段及步骤："
        label-width="200px"
        prop="method"
      >
        <el-input
          type="textarea"
          rows="8"
          v-model="reportData.method"
          autocomplete="off"
          style="width: 480px"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="工作基础及条件："
        label-width="200px"
        prop="condition"
      >
        <el-input
          type="textarea"
          rows="8"
          v-model="reportData.condition"
          autocomplete="off"
          style="width: 480px; margin-bottom: 40px"
        ></el-input>
      </el-form-item>
    </el-form>

    <!-- 对话框表格信息 -->
    <!-- 对话框表单 -->
    <div>
      <tableTool style="margin: 0 20px" />
      <el-table
        :data="dialogTableData"
        border
        style="width: 720px; margin: 0 20px"
      >
        <el-table-column prop="id" width="50" align="center"></el-table-column>
        <el-table-column prop="operator" label="操作人" width="130" sortable>
        </el-table-column>
        <el-table-column prop="role" label="角色" width="130" sortable>
        </el-table-column>
        <el-table-column
          prop="operationTime"
          label="操作时间"
          width="150"
          show-overflow-tooltip="true"
          sortable
        ></el-table-column>
        <el-table-column
          prop="operationType"
          label="操作类型"
          width="130"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="history"
          label="历史记录"
          width="129"
          align="center"
        >
          <el-button type="mini">查看详情</el-button>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="page">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          :pager-count="5"
          background
          layout="prev, pager, next, jumper,sizes, total"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 对话框尾部 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="closeDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import tableTool from '@/components/Function/TableTool.vue';

export default {
  props: ['dialogHeaderName', 'dialogOpenReportVisible', 'messages'],
  components: { tableTool },
  methods: {
    closeDialog() {
      this.$emit('closeDialogOpenReportVisible');
    },
  },
  data() {
    return {
      // 报告信息
      reportData: {
        views: '',
        researchContent: '',
        method: '',
        condition: '',
      },

      // 对话框表格信息
      dialogTableData: [
        {
          id: 1,
          operator: '测试教师0922',
          role: '指导教师',
          operationTime: '2022-09-22 20:53:20',
          operationType: '提交',
        },
        {
          id: 2,
          operator: '测试教师0912',
          role: '系主任',
          operationTime: '2022-09-23 21:23:46',
          operationType: '提交',
        },
        {
          id: 3,
          operator: '测试教师0932',
          role: '评阅教师',
          operationTime: '2022-09-24 18:51:24',
          operationType: '提交',
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding: 0px;
}

/deep/ .el-dialog__header {
  padding: 0px;
  margin-bottom: 20px;
}

/deep/ .el-dialog__headerbtn {
  top: 5px;
  right: 5px;
  padding-top: 10px;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  height: 30px;
  width: 35px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close:hover {
  color: gray;
}

.el-dialog {
  span {
    display: inline-block;
    margin: 10px 50px;
    font-weight: 700;

    i {
      font-style: normal;
      font-weight: 400;
    }
  }

  span:nth-child(4) {
    margin-bottom: 40px;
  }

  .el-form-item {
    margin-left: 20px;
  }

  .page {
    width: 718px;
    height: 40px;
    margin: 0 20px 20px;
    border: 1px solid #ebeef5;
  }
}

/deep/ .el-form-item__label {
  line-height: 20px;
}
</style>
